<template>
    <div class="fastFight">
        <div v-if="openTimes==100?true:false" class="open">
            <el-table
                class="tables"
                border
                size="mini"
                ref="list"
                :header-cell-style="{background:'#ccc'}"
                :data="list"
                stripe
                style="width: 100%"
            >
                <el-table-column prop="num" label="号码" min-width="60"></el-table-column>
                <el-table-column prop="itemAmount" label="金额" min-width="50"></el-table-column>
                <el-table-column prop="odds" label="赔率" min-width="50"></el-table-column>
                <el-table-column prop="statusName" label="状态" min-width="50"></el-table-column>
                <el-table-column prop="name" label="退码" min-width="65">
                    <template slot-scope="scope">
                        <mt-button v-if="scope.row.status==1?true:false" @click="backCode(scope.row)" size="small" type="primary">退码</mt-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="button">
                <el-input @blur="getOdds" size="small" v-model="number" placeholder="请输入号码"></el-input>
                <el-input size="small" v-model="money" placeholder="请输入金额"></el-input>
                <p>
                    赔率：
                    <span>{{oddss}}</span>
                </p>
                <mt-button @click="submit" style="width:100%" size="small" type="primary">下注</mt-button>
            </div>
        </div>
        <div v-if="openTimes<90?true:false" class="close">
            <span>已封盘</span>
            <br />
            <span v-if="openTimes>0?true:false">{{openTimes}}</span>
        </div>
    </div>
</template>

<script>
import { mapState } from "Vuex";
export default {
    name: "fastFight",
    data() {
        return {
            list: [],
            number: "",
            money: "",
            oddss: ""
        };
    },
    computed: {
        ...mapState(["saveType", "user", "showType", "openTimes","curMsg"])
    },
    watch: {
        saveType() {
            this.getList();
        }
    },
    created() {
        this.getList();
    },
    methods: {
        backCode(val) {
            this.$api.post(
                this.$url.cancel,
                {
                    ids: val.orderId,
                    module:this.saveType
                },
                res => {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        alert("退码成功!");   
                        this.user.balance = this.user.balance + val.itemAmount;
                        this.$store.commit('getUser',JSON.stringify(this.user))   
                        this.getList();
                    }
                }
            );
        },
        getList() {
            this.$api.post(
                this.$url.kuicklyPrint,
                {
                    module: this.saveType
                },
                res => {
                    if (res.data.code == 200) {
                        this.list = res.data.data;
                    }
                }
            );
        },
        submit() {
            var params = {
                module: this.saveType,
                amount: this.money,
                items: this.number
            };
            this.$api.post(this.$url.kuicklyBuy, params, res => {
                if (res.data.code == 200) {
                    this.user.balance = this.user.balance - this.money;
                    this.$store.commit('getUser',JSON.stringify(this.user))
                    this.number = ""
                    this.money = ""            
                    this.getList();
                }
            });
        },
        getOdds() {
            var params = {
                module: this.saveType,
                num: this.number
            };
            this.$api.post(this.$url.info4Num, params, res => {
                console.log(res.data);
                this.oddss = res.data.data.odds;
            });
        }
    }
};
</script>

<style lang="less" scoped>
.fastFight {
    padding: 10px 5px;
    box-sizing: border-box;
    .button {
        margin: 10px 0;
        p {
            font-size: 14px;
            margin: 4px 0;
            color: @color1;
        }
    }
}
.close {
    text-align: center;
    margin-top: 10vh;
    font-size: 30px;
}
</style>
